<template>
  <el-card shadow="hover">
    <template #header>
      <div class="title">
        <span>价格排行榜</span>
      </div>
    </template>
    <el-table :data="tableData" :default-sort="{ prop: 'price', order: 'descending' }" style="width: 100%">
      <el-table-column prop="name" label="名词" />
      <el-table-column prop="price" label="价格" sortable>
        <template #default="scope">
          {{ scope.row.price }} {{ scope.row.unit }}
        </template>
      </el-table-column>
      <el-table-column prop="category" label="属性" />
      <el-table-column prop="sort" label="同比">
        <template #default="scope">
          <el-icon>
            <ArrowUpBold v-if="scope.row.sortUnit == 'up'" color="#c45656" />
            <ArrowDownBold v-else="scope.row.sortUnit == 'down'" color="#529b2e" />
          </el-icon>
          {{ scope.row.sort }}
        </template>
      </el-table-column>
    </el-table>

  </el-card>
</template>

<script setup lang="ts">
const tableData = [
  {
    name: "可达鸭",
    price: 50,
    unit: "RMB",
    category: "精神系",
    sort: "50%",
    sortUnit: "up"
  },
  {
    name: "皮卡丘",
    price: 1000,
    unit: "RMB",
    category: "雷电系",
    sort: "120%",
    sortUnit: "up"
  },
  {
    name: "方酱",
    price: 233,
    unit: "RMB",
    category: "草系",
    sort: "50%",
    sortUnit: "down"
  },
  {
    name: "杰尼龟",
    price: 70,
    unit: "RMB",
    category: "鳄龟",
    sort: "60%",
    sortUnit: "up"
  },
  {
    name: "波克比",
    price: 1900,
    unit: "RMB",
    category: "精神系",
    sort: "150%",
    sortUnit: "up"
  }
];
</script>

<style lang="less">
.el-card {
  margin: 10px;
}
</style>
